<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1 class="title">Lorem ipsum dolor sit amet.</h1>
    <ul id="ul">
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
    </ul>
    <button id="btn">点击替换内容</button>


    <div id="box"></div>

    <script>

        // innerText 和 innerHTML  操作元素内容
        //innerHTML 获取元素下面的所有内容，包含文本和元素
        //innerText  获取元素下面的所有文本内容

        //获取h1
        let h1 = document.getElementsByClassName('title')[0];
        let ul = document.getElementById('ul');
        let btn = document.getElementById('btn');

        btn.onclick = function () {
            //innerText不能识别标签，innerHTML可以识别标签
            // console.log(ul.innerText);
            // console.log(ul.innerHTML);
            console.log(h1.innerText);
            // h1.innerText += '<span>这是修改后的内容</span>'
            h1.innerHTML += '<span>这是修改后的内容</span>'
        }


        //----- 文档碎片
        //在空的div当中再添加三个相同元素
        let div = document.getElementById('box');
        //创建文档碎片
        let oF = document.createDocumentFragment();

        //逐个添加节点效率比较低，添加一次节点就需要刷新一次
        for (let i = 0; i < 100; i++) {
            let p = document.createElement('p');
            p.innerText = 'lorem';
            //将元素放进文档碎片中保存
            oF.appendChild(p)
        }
        //最后一次性添加所有元素
        div.appendChild(oF)


       






    </script>

</body>

</html>